import React from 'react';
import { Card, Col, Row, Statistic, Typography } from 'antd';
import { UserOutlined, CarOutlined, FileTextOutlined, BarChartOutlined } from '@ant-design/icons';
import { useAuthStore } from '../stores/authStore';

const { Title } = Typography;

const Dashboard: React.FC = () => {
  const { user } = useAuthStore();

  return (
    <div>
      <Title level={2}>分析页</Title>
      {user && <p>欢迎, {user.username}!</p>}
      {!user && <p>欢迎使用农福车辆作业系统</p>}
      
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={120}
              prefix={<UserOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="车辆总数"
              value={85}
              prefix={<CarOutlined />}
              suffix="辆"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="作业记录"
              value={240}
              prefix={<FileTextOutlined />}
              suffix="条"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="完成率"
              value={92}
              prefix={<BarChartOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
      </Row>
      
      <Card title="系统概览">
        <p>这里是系统的数据分析概览页面。</p>
        <p>您可以在这里查看各种统计数据和图表。</p>
      </Card>
    </div>
  );
};

export default Dashboard;